---
path: /nav/pagination
name: pagination
title: Pagination 分页
---


<div class="sys-ctx-main-left">

# Pagination 分页\{#title\}

## 代码演示 \{#sp-demos\}

::demos{columns=2}

:::demo[基础用法]{id='base' src='/nav/pagination/1base.demo.tsx'}

基础用法，当前页 `current` 为控制属性

:::


:::demo[尺寸]{id='small' src='/nav/pagination/2small.demo.tsx'}

小尺寸分页组件， 设置 `size` 为 `small`

:::


:::demo[迷你型]{id='mini' src='/nav/pagination/3mini.demo.tsx'}

设置 `mini` 属性可以设置迷你型分页

:::


:::demo[数字分页]{id='hide' src='/nav/pagination/4hide.demo.tsx'}

总数据量可通过设置 `showTotal` 为false \
页数可通过设置 `showPage` 为false \
跳转可通过设置 `showJumper` 为false
数字可通过设置 `showNums` 为false

:::


:::demo[最小化分页]{id='min' src='/nav/pagination/5min.demo.tsx'}

通过设置 min 显示最小化分页

:::


:::demo[圆形]{id='circle' src='/nav/pagination/6circle.demo.tsx'}

设置 `shape='circle'` 可渲染圆形按钮的分页

:::


:::demo[每页数]{id='pages' src='/nav/pagination/7pages.demo.tsx'}

可通过 `pages` 属性自定义 每页的数据量

:::




## 属性 \{#props\}

| 属性 | 说明 | 类型 | 默认值 |
| :--- | :---- | :--- | :--- |
|classList|自定义class|Object|-|
|class|自定义class|string|-|
|style|自定义样式|Object||
|shape|可以选择|normal &#124; circle|normal|
|size|分页尺寸|small &#124; large||
|current|当前页|number||
|total|总数据量|number||
|pageSize|每页数据量|number||
|pages|每页数据量选项|Array||
|mini|最小化只有跳转和总页数和前一页后一页|Boolean||
|innerNear|中间当前页的前后页数|number|2|
|startEndShowNum|前后最少显示的页数|number|2|
|showJumper|是否显示跳转|boolean|true|
|showPage|是否显示页数选择|boolean|true|
|showTotal|是否显示总数|boolean|true|
|showNums|是否显示页号|boolean|true|
|onChange|页号选择事件|Function||
|onChangePageSize|每页数量变化事件|Function||


## 事件 \{#events\}

| 事件名称 | 说明 | 返回值|
| :--- | :---- | :--- |
|`onChange`|页号选择事件|pageNum|
|`onChangePageSize`|每页数量变化事件|pageSize|


</div>

